<template>
	<view class="main">
		<image src="../../static/img/left.png" class="back" @click="goBack"></image>
		<view class="songName">{{ $store.state.songSheet.list[$store.state.songSheet.playIndex].musicName }}</view>
		<view class="singerName">{{ $store.state.songSheet.list[$store.state.songSheet.playIndex].musicAuthor }}</view>
		<image src="../../static/img/disc.png" :class="[play ? 'discPlay' : 'discPause']"></image>
		<image :src="pubUrl+$store.state.songSheet.list[$store.state.songSheet.playIndex].musicImg" :class="[play ? 'coverPlay' : 'coverPause']"></image>
		<view class="event">
			<image src="../../static/img/mainIcon/xh.png" v-if="!like" @click="toLike()"></image>
			<image src="../../static/img/mainIcon/xh2.png" v-if="like" @click="toLike()"></image>
			<image src="../../static/img/mainIcon/xz.png" mode="" @click="downloadMusic"></image>
			<image src="../../static/img/mainIcon/sd.png" @click="show = true"></image>
		</view>
		<view class="control">
			<text class="playNum">{{ currentTime }}</text>
			<view class="" style="width: 70%;">
				<u-slider v-model="value" @end="sliderEnd" class="u-slider" inactive-color="#8a8a8a" active-color="#dbdbdb" height="3">
					<view class=""><view class="badge-button"></view></view>
				</u-slider>
			</view>

			<text class="playNum">{{ duration }}</text>
		</view>
		<view class="console">
			<image :src="'../../static/img/mainIcon/' + pattern.icon" @click="patternEvent()"></image>
			<image src="../../static/img/mainIcon/syq.png" mode="" @click="switchSong(1)"></image>
			<image src="../../static/img/mainIcon/bf.png" class="playImg" @click="playAudio()" v-if="!play"></image>
			<image src="../../static/img/mainIcon/zt.png" class="playImg" @click="pauseAudio()" v-if="play"></image>
			<image src="../../static/img/mainIcon/xyq.png" mode="" @click="switchSong(2)"></image>
			<image src="../../static/img/mainIcon/lb.png" mode="" @click="popupShow = true"></image>
		</view>
		<u-popup v-model="popupShow" mode="bottom" height="50%">
			<view class="popup">
				<view class="songSheeet">
					<view :class="[$store.state.songSheet.playIndex == index ? 'itemIs' : 'itemNo']" v-for="(item, index) in songList" :key="index">
						{{ item.musicName }}
						<text class="singer">--{{ item.musicAuthor }}</text>
						<image src="../../static/img/mainIcon/bf.png" class="sheetPlay" mode="" @click="appoint(index)"></image>
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup v-model="show" mode="center" width="80%" height="50%">
			<view class="addSongMenu"><view class="add_but" v-if="!addShow" @click="addShow = !addShow">创建歌单</view></view>
			<view class="addInput" v-if="addShow">
				<u-input class="inputvalue" style="position: absolute; top: 2px;" v-model="inputvalue" />
				<text style="position: absolute;right: 50px;top: 2px;" @click="musiclistInsertApi">添加</text>
				<text style="position: absolute;right: 10px;top: 2px;color:red" @click="addShow = !addShow">取消</text>
			</view>
			<view class="menuList">
				<view class="menuItem" v-for="(item, index) in menuList">
					<image :src="pubUrl + item.musicListImg"></image>
					<text style="width: 10px;"></text>
					{{ item.musicListName }}
					<view class="addMenu" @click="insertbymusiclistApi(item.id)">+</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { Audio, playAudio, pauseAudio, switchSong, mp3Src } from '@/common/Audio';
import { conversion } from '@/common/timeCompletion';
import store from '@/store/index.js';
import { createLrcObj } from '@/common/lrc';
import { getislike, detelelike, addlike, playrecord, getMenuAll, insertbymusiclist, musiclistInsert } from '@/api/song';
import { pubUrl } from '@/api/http.js';

export default {
	data() {
		return {
			play: false,
			value: 0,
			currentTime: '00:00',
			duration: '00:00',
			popupShow: false,
			pattern: 0,
			songList: [],
			like: false,
			musicId: -1,
			show: false,
			menuList: [],
			pubUrl: pubUrl,
			inputvalue: '',
			addShow: false
		};
	},
	methods: {
		//新增歌单
		musiclistInsertApi() {
			let musicImg = store.state.songSheet.list[store.state.songSheet.playIndex].musicImg;
			this.addShow = false;
			musiclistInsert({ musicListName: this.inputvalue, musicListImg: musicImg }).then(res => {
				this.getMenuList();
			});
		},
		//新增歌曲至歌单
		insertbymusiclistApi(musicListId) {
			this.show = false;
			let musicId = store.state.songSheet.list[store.state.songSheet.playIndex].id;
			insertbymusiclist({ musicListId: musicListId, musicId: musicId }).then(res => {});
		},
		//获取歌单列表
		getMenuList() {
			getMenuAll().then(res => {
				this.menuList = res.data;
				console.log(this.menuList);
			});
		},
		//返回键
		goBack() {
			uni.navigateBack();
		},
		//播放
		playAudio() {
			playAudio();
			this.play = store.state.playState;
			this.islike();
		},
		//暂停
		pauseAudio() {
			pauseAudio();
			this.play = store.state.playState;
		},
		//切换音乐
		switchSong(type) {
			switchSong(type);
			this.play = store.state.playState;
			this.islike();
		},
		//播放指定的歌曲
		appoint(index) {
			switchSong(3, false, index);
			this.play = store.state.playState;
			this.islike();
		},
		//进度条数据
		progressWatch() {
			//进度的回调
			Audio.onTimeUpdate(() => {
				this.currentTime = conversion(Audio.currentTime);
				this.duration = conversion(Audio.duration);
				this.value = (Audio.currentTime / Audio.duration) * 100;
				if (Audio.currentTime == Audio.duration) {
					switchSong(2, true);
					this.islike();
				}
			});
		},
		//滑块拖动结束
		sliderEnd() {
			//Audio.currentTime = this.value * 0.01 * Audio.duration;
			//Audio.seek( this.value * 0.01 * Audio.duration)
		},
		//切换播放模式
		patternEvent() {
			store.commit('setPattern');
			this.pattern = store.state.pattern.list[store.state.pattern.patternIndex];
		},
		//判断歌曲是不是自己喜欢
		islike() {
			this.musicId = this.songList[store.state.songSheet.playIndex].id;
			getislike({ id: this.musicId }).then(res => {
				this.like = res.data;
			});
			this.playrecordApi();
		},
		//添加至喜欢，反正取消
		toLike() {
			if (this.like) {
				detelelike({ musicId: this.musicId }).then(res => {
					this.islike();
				});
			} else {
				addlike({ musicId: this.musicId }).then(res => {
					this.islike();
				});
			}
		},
		//下载歌曲
		downloadMusic() {
			let a = document.createElement('a');
			a.setAttribute('href', mp3Src);
			a.setAttribute('target', '_blank');
			a.setAttribute('id', 'startTelMedicine');
			// 防止反复添加
			if (document.getElementById('startTelMedicine')) {
				document.body.removeChild(document.getElementById('startTelMedicine'));
			}
			document.body.appendChild(a);
			a.click();
		},
		playrecordApi() {
			playrecord({ musicId: this.musicId });
		}
	},
	onLoad() {
		//页面渲染完成
		this.$nextTick(() => {
			this.progressWatch();
		});
		this.play = store.state.playState;
		if (this.play) {
			playAudio();
		}
		//获取播放模式
		this.pattern = store.state.pattern.list[store.state.pattern.patternIndex];
		//获取播放的歌单
		this.songList = store.state.songSheet.list;
		this.getMenuList();
	}
};
</script>

<style lang="less">
.popup {
	background-color: #101113;
	height: 100%;
	position: absolute;
	width: 100%;
}
.main {
	background-image: linear-gradient(#5f5c53, #35352d);
	width: 100%;
	height: 100%;
	position: absolute;
	width: 100%;
	.addSongMenu {
		width: 100%;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 10px;
		.add_but {
			width: 70px;
			height: 20px;
			border-radius: 15px;
			color: #fff;
			background-color: #2979ff;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.addInput {
		width: 100%;
		display: flex;
		margin-bottom: 10px;
	}
	.menuList {
		.menuItem {
			width: 100%;
			display: flex;
			align-items: center;
			margin: 10px;

			image {
				width: 40px;
				height: 40px;
			}
			.addMenu {
				border-radius: 100%;
				background-color: green;
				width: 20px;
				height: 20px;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 20px;
				position: absolute;
				right: 10px;
			}
		}
	}
	.songName {
		position: fixed;
		text-align: center;
		color: #fff;
		width: 100%;
		top: 12%;
	}
	.singerName {
		position: fixed;
		text-align: center;
		color: #ccc;
		width: 100%;
		top: calc(12% + 20px);
		font-size: 12px;
	}
	.songSheeet {
		background-color: #101113;
		padding-top: 10px;

		.item {
			margin: 5px;
			margin-top: 0;
			margin-bottom: 10px;

			position: relative;
			font-size: 13px;
			height: 20px;
			.sheetPlay {
				width: 20px;
				height: 20px;
				position: absolute;
				right: 5px;
			}
			.singer {
				color: #ccc;
				font-size: 10px;
			}
		}
		.itemNo {
			.item();
			color: #f9f9f9;
		}
		.itemIs {
			color: red;
			.item();
			.singer {
				color: red;
			}
		}
	}
	.event {
		position: fixed;
		bottom: 18%;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		image {
			width: 30px;
			height: 30px;
			margin: 0 30px;
		}
	}
	.console {
		position: fixed;
		bottom: 7%;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		image {
			width: 30px;
			height: 30px;
			margin: 0 15px;
		}
		.playImg {
			width: 40px;
			height: 40px;
			margin: 0 15px;
		}
	}
	.control {
		width: 100%;
		position: fixed;
		bottom: 15%;
		display: flex;
		color: #ccc;
		align-items: center;
		justify-content: center;
		.playNum {
			margin: 0 10px;
			font-size: 8px;
		}
		.u-slider {
			width: 100%;

			.badge-button {
				border-radius: 100%;
				width: 8px;
				height: 8px;
				background: #dbdbdb;
			}
		}
	}
	.rotate {
		animation: rotate 5s linear infinite;
		@keyframes rotate {
			from {
				transform: rotate(0deg);
			}
			to {
				transform: rotate(360deg);
			}
		}
	}

	.disc {
		width: 250px;
		height: 250px;
		position: fixed;
		top: calc(25%);
		left: calc(50% - 125px);
	}
	.discPlay {
		.disc();
		.rotate();
	}
	.discPause {
		.disc();
	}
	.cover {
		width: 150px;
		height: 150px;
		border-radius: 100%;
		position: fixed;
		top: calc(25% + 50px);
		left: calc(50% - 75px);
	}
	.coverPlay {
		.cover();
		.rotate();
	}
	.coverPause {
		.cover();
	}
}
.back {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 25px;
	height: 25px;
}
</style>
<style>
.music {
	position: fixed;
	top: 10px;
	left: 88%;
	height: 40px;
	line-height: 40px;
	width: 40px;
	border-radius: 40px;
	color: #ffffff;
	z-index: 999;
	background: rgba(51, 51, 51, 0.5);
	text-align: center;
}
.rotate {
	-webkit-animation: rotating 1.2s linear infinite;
	-moz-animation: rotating 1.2s linear infinite;
	-o-animation: rotating 1.2s linear infinite;
	animation: rotating 1.2s linear infinite;
}
@-webkit-keyframes rotating {
	from {
		-webkit-transform: rotate(0);
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes rotating {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(360deg);
	}
}
@-moz-keyframes rotating {
	from {
		-moz-transform: rotate(0);
	}
	to {
		-moz-transform: rotate(360deg);
	}
}
.musicIcon {
	font-size: 20px;
}
</style>
